<template>
  <div>
    <div class="face">
      <div class="eyes">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
      
    return {};
  },
  mounted() {
    document.querySelector("body").addEventListener("mousemove", eyeball);
    function eyeball() {
      var eye = document.querySelectorAll(".eye");
      eye.forEach(function(eye) {
        let x = eye.getBoundingClientRect().left+(eye.clientWidth/2);
        let y = eye.getBoundingClientRect().top+(eye.clientHeight/2);
        let radian=Math.atan2(event.pageX-x,event.pageY-y)
        let rot=(radian*(180/Math.PI)* -1)+0
        eye.style.transform="rotate("+rot+"deg)";
        // console.log(eye.clientWidth/2);
      });
    }
  }
};
</script>


<style lang="scss" scoped>
@mixin flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.face {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #ffcc00;
  @include flex-center-center;
}

.face::before {
  content: "";
  position: absolute;
  top: 180px;
  width: 150px;
  height: 70px;
  background: #b57700;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 70px;
  transition: 0.5s;
}
.face:hover:before {
  top: 210px;
  width: 150px;
  height: 20px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.eyes {
  position: relative;
  top: -40px;
  display: flex;
}

.eyes .eye {
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background-color: #fff;
  margin: 0 15px;
  border-radius: 50%;
}
.eyes .eye::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
}
</style>